p5js*

家紋の模写をp5jsでやってみる

<家紋の名前>

丸に三つ鱗(原画)

<制作手順>

1.let num関数を600に設定する(キャンバスの大きさを600×600にするため)

2.creative canbasで値を600×600を設定する代わりに先ほどのnumを使い、
creative canbas(num,num)とかく

3.家紋のベースとなる塗りつぶされた黒い円形の枠をellipseを使ってかく、
その際、最初に黒色の円 fill(0) ellipse(num / 2, num / 2, num , num)をかき、
それより少し小さい白色の円 fill(0) ellipse(num / 2, num / 2, num 1.15, num 1.15)をかく

4.三角形をtriangleで作図し、それぞれの頂点をXY座標を使って指定する
fill(0); // 塗りつぶしの色
triangle(201, 235, 407, 235, 300, 45);
// 三角形1を生成(始点のx軸, 始点のy軸, 2点目のx軸, 2点目のy軸, 終点のx軸, 終点のy軸)

fill(0); // 塗りつぶしの色
triangle(90, 433, 306, 433, 199, 238);
// 三角形2を生成(始点のx軸, 始点のy軸, 2点目のx軸, 2点目のy軸, 終点のx軸, 終点のy軸)

fill(0); // 塗りつぶしの色
triangle(310, 433, 505, 433, 407, 238);
// 三角形3を生成(始点のx軸, 始点のy軸, 2点目のx軸, 2点目のy軸, 終点のx軸, 終点のy軸)

<レビューを受けて>

キャンバスに家紋の名前を追加しました 
textSize(13);//文字の大きさ 
 text('丸に三つ鱗', 530, 540);//家紋の名前
 fill(0, 102, 153);